<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#0078E7"><meta name="author" content="yangbo.wang"><meta name="copyright" content="yangbo.wang"><meta name="generator" content="Hexo 5.3.0"><meta name="theme" content="hexo-theme-yun"><title>Django模板介绍 | Blog</title><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@900&amp;display=swap" media="print" onload="this.media='all'"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/star-markdown-css@0.1.22/dist/yun/yun-markdown.min.css"><script src="//at.alicdn.com/t/font_1140697_ed8vp4atwoj.js" async></script><script src="https://cdn.jsdelivr.net/npm/scrollreveal/dist/scrollreveal.min.js" defer></script><script>document.addEventListener("DOMContentLoaded", () => {
  [".post-card",".post-content img"].forEach((target)=> {
    ScrollReveal().reveal(target);
  })
});
</script><link rel="shortcut icon" type="image/svg+xml" href="/yun.svg"><link rel="mask-icon" href="/yun.svg" color="#0078E7"><link rel="alternate icon" href="/yun.ico"><link rel="preload" href="/css/hexo-theme-yun.css" as="style"><link rel="preload" href="/js/utils.js" as="script"><link rel="preload" href="/js/hexo-theme-yun.js" as="script"><link rel="prefetch" href="/js/sidebar.js" as="script"><link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin><script id="yun-config">
    const Yun = window.Yun || {};
    window.CONFIG = {"hostname":"example.com","root":"/","title":"你的月亮我的心","version":"1.4.0","mode":"dark","copycode":true,"page":{"isPost":true},"anonymous_image":"https://cdn.jsdelivr.net/gh/YunYouJun/cdn/img/avatar/none.jpg","say":{"api":"https://v1.hitokoto.cn","hitokoto":true},"fireworks":{"colors":["102, 167, 221","62, 131, 225","33, 78, 194"]}};
  </script><link rel="stylesheet" href="/css/hexo-theme-yun.css"><script src="/js/utils.js"></script><script src="/js/hexo-theme-yun.js"></script><meta name="description" content="模板介绍 作为Web框架，Django提供了模板，可以很便利的动态生成HTML    模版系统致力于表达外观，而不是程序逻辑    模板的设计实现了业务逻辑(view)与显示内容（template）的分离，一个视图可以使用任意一个模板，一个模板可以供多个视图使用    模板包含    HTML的静态部分    动态插入内容部分    Django模板语言，简写DTL，定义在django.templ">
<meta property="og:type" content="article">
<meta property="og:title" content="Django模板介绍">
<meta property="og:url" content="http://example.com/2021/01/17/django%E6%A8%A1%E6%9D%BF/index.html">
<meta property="og:site_name" content="Blog">
<meta property="og:description" content="模板介绍 作为Web框架，Django提供了模板，可以很便利的动态生成HTML    模版系统致力于表达外观，而不是程序逻辑    模板的设计实现了业务逻辑(view)与显示内容（template）的分离，一个视图可以使用任意一个模板，一个模板可以供多个视图使用    模板包含    HTML的静态部分    动态插入内容部分    Django模板语言，简写DTL，定义在django.templ">
<meta property="og:locale" content="en_US">
<meta property="article:published_time" content="2021-01-17T07:12:04.105Z">
<meta property="article:modified_time" content="2021-01-17T07:29:28.636Z">
<meta property="article:author" content="yangbo.wang">
<meta property="article:tag" content="Django">
<meta property="article:tag" content="DTL">
<meta name="twitter:card" content="summary"><script src="/js/ui/mode.js"></script></head><body><script defer src="https://cdn.jsdelivr.net/npm/animejs@latest"></script><script defer src="/js/ui/fireworks.js"></script><canvas class="fireworks"></canvas><div class="container"><a class="sidebar-toggle hty-icon-button" id="menu-btn"><div class="hamburger hamburger--spin" type="button"><span class="hamburger-box"><span class="hamburger-inner"></span></span></div></a><div class="sidebar-toggle sidebar-overlay"></div><aside class="sidebar"><script src="/js/sidebar.js"></script><ul class="sidebar-nav"><li class="sidebar-nav-item sidebar-nav-toc hty-icon-button sidebar-nav-active" data-target="post-toc-wrap" title="Table of Contents"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-list-ordered"></use></svg></li><li class="sidebar-nav-item sidebar-nav-overview hty-icon-button" data-target="site-overview-wrap" title="Overview"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-passport-line"></use></svg></li></ul><div class="sidebar-panel" id="site-overview-wrap"><div class="site-info fix-top"><a class="site-author-avatar" href="/about/" title="yangbo.wang"><img width="96" loading="lazy" src="/Yun.png" alt="yangbo.wang"></a><div class="site-author-name"><a href="/about/">yangbo.wang</a></div><a class="site-name" href="/about/site.html">Blog</a><sub class="site-subtitle"></sub><div class="site-desciption"></div></div><nav class="site-state"><a class="site-state-item hty-icon-button icon-home" href="/" title="Home"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-home-4-line"></use></svg></span></a><div class="site-state-item"><a href="/archives/" title="Archives"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-archive-line"></use></svg></span><span class="site-state-item-count">8</span></a></div><div class="site-state-item"><a href="/categories/" title="Categories"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-2-line"></use></svg></span><span class="site-state-item-count">2</span></a></div><div class="site-state-item"><a href="/tags/" title="Tags"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="site-state-item-count">9</span></a></div><a class="site-state-item hty-icon-button" href="/" title="文档"><span class="site-state-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-settings-line"></use></svg></span></a></nav><hr style="margin-bottom:0.5rem"><div class="links-of-author"><a class="links-of-author-item hty-icon-button" rel="noopener" title="微信 A18309169837" target="_blank" style="color:orange"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-wechat-2-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="QQ  1197213754" target="_blank" style="color:#12B7F5"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-qq-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" href="https://gitee.com/wyb_001" title="GitHub" target="_blank" style="color:#6e5494"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-github-line"></use></svg></a><a class="links-of-author-item hty-icon-button" rel="noopener" title="E-Mail 1197213754@qq.com" target="_blank" style="color:#8E71C1"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-mail-line"></use></svg></a></div><hr style="margin:0.5rem 1rem"><div class="links"><a class="links-item hty-icon-button" href="/about/" title="关于我" style="color:dodgerblue"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-genderless-line"></use></svg></a></div></div><div class="sidebar-panel sidebar-panel-active" id="post-toc-wrap"><div class="post-toc"><div class="post-toc-content"><ol class="toc"><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E4%BB%8B%E7%BB%8D"><span class="toc-number">1.</span> <span class="toc-text">模板介绍</span></a></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E5%AE%9A%E4%B9%89%E6%A8%A1%E6%9D%BF"><span class="toc-number">2.</span> <span class="toc-text">定义模板</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E5%8F%98%E9%87%8F"><span class="toc-number">2.1.</span> <span class="toc-text">变量</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E6%A0%87%E7%AD%BE"><span class="toc-number">2.2.</span> <span class="toc-text">标签</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%BF%87%E6%BB%A4%E5%99%A8"><span class="toc-number">2.3.</span> <span class="toc-text">过滤器</span></a></li></ol></li><li class="toc-item toc-level-3"><a class="toc-link" href="#%E6%A8%A1%E6%9D%BF%E7%BB%A7%E6%89%BF"><span class="toc-number">3.</span> <span class="toc-text">模板继承</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#%E8%AF%B4%E6%98%8E"><span class="toc-number">3.1.</span> <span class="toc-text">说明</span></a></li><li class="toc-item toc-level-4"><a class="toc-link" href="#2-%E5%88%9B%E5%BB%BA%E5%88%86%E6%94%AF%E6%A8%A1%E7%89%88"><span class="toc-number">3.2.</span> <span class="toc-text">2.创建分支模版</span></a></li></ol></li></ol></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link"><span class="toc-number"></span> <span class="toc-text">goods left</span></a><ol class="toc-child"><li class="toc-item toc-level-4"><a class="toc-link" href="#4-%E8%A7%86%E5%9B%BE%E8%B0%83%E7%94%A8%E5%85%B7%E4%BD%93%E9%A1%B5%E9%9D%A2%EF%BC%8C%E5%B9%B6%E4%BC%A0%E9%80%92%E6%A8%A1%E6%9D%BF%E4%B8%AD%E9%9C%80%E8%A6%81%E7%9A%84%E6%95%B0%E6%8D%AE"><span class="toc-number">0.1.</span> <span class="toc-text">4.视图调用具体页面，并传递模板中需要的数据</span></a></li></ol></li></ol></div></div></div></aside><main class="sidebar-translate" id="content"><div id="post"><article class="post-block" itemscope itemtype="https://schema.org/Article"><link itemprop="mainEntityOfPage" href="http://example.com/2021/01/17/django%E6%A8%A1%E6%9D%BF/"><span hidden itemprop="author" itemscope itemtype="https://schema.org/Person"><meta itemprop="name" content="yangbo.wang"><meta itemprop="description"></span><span hidden itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><meta itemprop="name" content="Blog"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">Django模板介绍</h1><div class="post-meta"><div class="post-time" style="display:inline-block"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-calendar-line"></use></svg></span> <time title="Created: 2021-01-17 15:12:04" itemprop="dateCreated datePublished" datetime="2021-01-17T15:12:04+08:00">2021-01-17</time></div><div class="post-classify"><span class="post-category"> <span class="post-meta-item-icon" style="margin-right:3px;"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-folder-line"></use></svg></span><span itemprop="about" itemscope itemtype="https://schema.org/Thing"><a class="category" href="/categories/Python/" style="--text-color:var(--hty-text-color)" itemprop="url" rel="index"><span itemprop="text">Python</span></a></span></span><span class="post-tag"><span class="post-meta-divider">-</span><a class="tag" href="/tags/Django/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">Django</span></a><a class="tag" href="/tags/DTL/" style="--text-color:var(--hty-text-color)"><span class="post-meta-item-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-price-tag-3-line"></use></svg></span><span class="tag-name">DTL</span></a></span></div></div></header><section class="post-body" itemprop="articleBody"><div class="post-content markdown-body" style="--smc-primary:#0078E7;"><h3 id="模板介绍"><a href="#模板介绍" class="headerlink" title="模板介绍"></a>模板介绍</h3><ul>
<li><p>作为Web框架，Django提供了模板，可以很便利的动态生成HTML  </p>
</li>
<li><p>模版系统致力于表达外观，而不是程序逻辑  </p>
</li>
<li><p>模板的设计实现了业务逻辑(view)与显示内容（template）的分离，一个视图可以使用任意一个模板，一个模板可以供多个视图使用  </p>
</li>
<li><p>模板包含  </p>
</li>
<li><p>HTML的静态部分  </p>
</li>
<li><p>动态插入内容部分  </p>
</li>
<li><p>Django模板语言，简写DTL，定义在django.template包中  </p>
</li>
<li><p>由startproject命令生成的settings.py定义关于模板的值：  </p>
</li>
<li><p>DIRS定义了一个目录列表，模板引擎按列表顺序搜索这些目录以查找模板源文件  </p>
</li>
<li><p>APP_DIRS告诉模板引擎是否应该在每个已安装的应用中查找模板  </p>
</li>
<li><p>常用方式：在项目的根目录下创建templates目录，设置DIRS值  </p>
<pre><code>  DIRS=[os.path.join(BASE_DIR,&quot;templates&quot;)]  </code></pre>
</li>
</ul>
<h3 id="定义模板"><a href="#定义模板" class="headerlink" title="定义模板"></a>定义模板</h3><ul>
<li>模板语言包括  </li>
<li>变量  </li>
<li>标签 { % 代码块 % }  </li>
<li>过滤器  </li>
<li>注释  </li>
</ul>
<h4 id="变量"><a href="#变量" class="headerlink" title="变量"></a>变量</h4><ul>
<li><p>语法：  </p>
<pre><code>  &#123;&#123; variable &#125;&#125;  </code></pre>
</li>
<li><p>当模版引擎遇到一个变量，将计算这个变量，然后将结果输出  </p>
</li>
<li><p>变量名必须由字母、数字、下划线（不能以下划线开头）和点组成  </p>
</li>
<li><p>当模版引擎遇到点(“.”)，会按照下列顺序查询：  </p>
</li>
</ul>
<p> 1.字典查询，例如：foo[“bar”]<br> 2.属性或方法查询，例如：foo.bar<br> 3.数字索引查询，例如：foo[bar]  </p>
<ul>
<li>如果变量不存在， 模版系统将插入’’ (空字符串)  </li>
<li>在模板中调用方法时不能传递参数  </li>
</ul>
<h4 id="标签"><a href="#标签" class="headerlink" title="标签"></a>标签</h4><ul>
<li><p>语法：{ % tag % }  </p>
</li>
<li><p>作用  </p>
</li>
<li><p>在输出中创建文本  </p>
</li>
<li><p>控制循环或逻辑  </p>
</li>
<li><p>加载外部信息到模板中供以后的变量使用  </p>
</li>
<li><p>for标签  </p>
<pre><code>  &#123; %for ... in ...%&#125;
  循环逻辑
  &#123;&#123;forloop.counter&#125;&#125;表示当前是第几次循环
  &#123; %empty%&#125;
  给出的列表为或列表不存在时，执行此处
  &#123; %endfor%&#125;  </code></pre>
</li>
<li><p>if标签  </p>
<pre><code>  &#123; %if ...%&#125;
  逻辑1
  &#123; %elif ...%&#125;
  逻辑2
  &#123; %else%&#125;
  逻辑3
  &#123; %endif%&#125;  </code></pre>
</li>
<li><p>comment标签  </p>
<pre><code>  &#123; % comment % &#125;  
  多行注释
  &#123; % endcomment % &#125;  </code></pre>
</li>
<li><p>include：加载模板并以标签内的参数渲染  </p>
<pre><code>  &#123; %include &quot;foo/bar.html&quot; % &#125;  </code></pre>
</li>
<li><p>url：反向解析</p>
<pre><code>  &#123; % url &#39;name&#39; p1 p2 %&#125;     </code></pre>
</li>
<li><p>csrf_token：这个标签用于跨站请求伪造保护  </p>
<p>  { % csrf_token %}  </p>
</li>
<li><p>布尔标签：and、or，and比or的优先级高  </p>
</li>
<li><p>block、extends：详见“模板继承”  </p>
</li>
<li><p>autoescape：详见“HTML转义”  </p>
<h4 id="过滤器"><a href="#过滤器" class="headerlink" title="过滤器"></a>过滤器</h4></li>
<li><p>语法：{ { 变量|过滤器 }}，例如{ { name|lower }}，表示将变量name的值变为小写输出  </p>
</li>
<li><p>使用管道符号 (|)来应用过滤器  </p>
</li>
<li><p>通过使用过滤器来改变变量的计算结果  </p>
</li>
<li><p>可以在if标签中使用过滤器结合运算符  </p>
<pre><code>  if list1|length &gt; 1  </code></pre>
</li>
<li><p>过滤器能够被“串联”，构成过滤器链  </p>
<pre><code>  name|lower|upper  </code></pre>
</li>
<li><p>过滤器可以传递参数，参数使用引号包起来  </p>
<pre><code>  list|join:&quot;, &quot;  </code></pre>
</li>
<li><p>default：如果一个变量没有被提供，或者值为false或空，则使用默认值，否则使用变量的值</p>
<pre><code>  value|default:&quot;什么也没有&quot;    </code></pre>
</li>
<li><p>date：根据给定格式对一个date变量格式化  </p>
<pre><code>  value|date:&#39;Y-m-d&#39;  </code></pre>
</li>
<li><p>escape：详见“HTML转义”  </p>
</li>
<li><p>点击查看详细的过滤器  </p>
</li>
<li><h3 id="模板继承"><a href="#模板继承" class="headerlink" title="模板继承"></a>模板继承</h3></li>
<li><p>模板继承可以减少页面内容的重复定义，实现页面内容的重用  </p>
</li>
<li><p>典型应用：网站的头部、尾部是一样的，这些内容可以定义在父模板中，子模板不需要重复定义  </p>
</li>
<li><p>block标签：在父模板中预留区域，在子模板中填充  </p>
</li>
<li><p>extends继承：继承，写在模板文件的第一行  </p>
</li>
<li><p>定义父模板base.html  </p>
<pre><code>  &#123; %block block_name%&#125;   
  这里可以定义默认值
  如果不定义默认值，则表示空字符串
  &#123; %endblock%&#125;  </code></pre>
</li>
<li><p>定义子模板index.html  </p>
<pre><code>  &#123; % extends &quot;base.html&quot; %&#125;      </code></pre>
</li>
<li><p>在子模板中使用block填充预留区域  </p>
<pre><code>  &#123; %block block_name%&#125;         
  实际填充内容
  &#123; %endblock%&#125;  </code></pre>
<h4 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h4></li>
<li><p>如果在模版中使用extends标签，它必须是模版中的第一个标签  </p>
</li>
<li><p>不能在一个模版中定义多个相同名字的block标签  </p>
</li>
<li><p>子模版不必定义全部父模版中的blocks，如果子模版没有定义block，则使用了父模版中的默认值  </p>
</li>
<li><p>如果发现在模板中大量的复制内容，那就应该把内容移动到父模板中  </p>
</li>
<li><p>使用可以获取父模板中block的内容  </p>
</li>
<li><p>为了更好的可读性，可以给endblock标签一个名字  </p>
<pre><code>  &#123; % block block_name %&#125;
  区域内容
  &#123; % endblock block_name %&#125;  </code></pre>
<h4 id="2-创建分支模版"><a href="#2-创建分支模版" class="headerlink" title="2.创建分支模版"></a>2.创建分支模版</h4></li>
<li><p>继承自base.html  </p>
</li>
<li><p>名为“base_*.html”  </p>
</li>
<li><p>定义特定分支共用的内容  </p>
</li>
<li><p>定义base_goods.html  </p>
<pre><code>  &#123;%extends 'temtest/base.html'%&#125;
  &#123;%block title%&#125;商品&#123;%endblock%&#125;
  &#123;%block left%&#125;
        <h1>goods left</h1>
        &#123;%endblock%&#125;  </code></pre>
</li>
<li><p>定义base_user.html  </p>
<pre><code>  &#123;%extends 'temtest/base.html'%&#125;
  &#123;%block title%&#125;用户中心&#123;%endblock%&#125;
  &#123;%block left%&#125;
        <font color='blue'>user left</font>
        &#123;%endblock%&#125;  </code></pre>
</li>
<li><p>定义index.html，继承自base.html，不需要写left块  </p>
<pre><code>  &#123;%extends 'temtest/base.html'%&#125;
  &#123;%block content%&#125;  </code></pre>
</li>
<li><p>首页内容  </p>
<pre><code>  &#123;%endblock content%&#125;  </code></pre>
</li>
</ul>
<h4 id="4-视图调用具体页面，并传递模板中需要的数据"><a href="#4-视图调用具体页面，并传递模板中需要的数据" class="headerlink" title="4.视图调用具体页面，并传递模板中需要的数据"></a>4.视图调用具体页面，并传递模板中需要的数据</h4><ul>
<li><p>首页视图index  </p>
<pre><code>  logo=&#39;welcome to itcast&#39;
  def index(request):
      return render(request, &#39;temtest/index.html&#39;, &#123;&#39;logo&#39;: logo&#125;)  </code></pre>
</li>
<li><p>商品列表视图goodslist  </p>
<pre><code>  def goodslist(request):
      return render(request, &#39;temtest/goodslist.html&#39;, &#123;&#39;logo&#39;: logo&#125;)</code></pre>
</li>
<li><p>用户密码视图userpwd  </p>
<pre><code>  def userpwd(request):
      return render(request, &#39;temtest/userpwd.html&#39;, &#123;&#39;logo&#39;: logo&#125;)  </code></pre>
</li>
</ul>
</div><ul class="post-copyright"><li class="post-copyright-author"><strong>Post author: </strong>yangbo.wang</li><li class="post-copyright-link"><strong>Post link: </strong><a href="http://example.com/2021/01/17/django%E6%A8%A1%E6%9D%BF/" title="Django模板介绍">http://example.com/2021/01/17/django%E6%A8%A1%E6%9D%BF/</a></li><li class="post-copyright-license"><strong>Copyright Notice: </strong>All articles in this blog are licensed under <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deed.zh" target="_blank" rel="noopener" title="CC BY-NC-SA 4.0 "><svg class="icon"><use xlink:href="#icon-creative-commons-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-by-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-nc-line"></use></svg><svg class="icon"><use xlink:href="#icon-creative-commons-sa-line"></use></svg></a> unless otherwise stated.</li></ul></section></article><div class="post-nav"><div class="post-nav-item"><a class="post-nav-prev" href="/2021/01/17/Django%E6%A8%A1%E5%9E%8B/" rel="prev" title="ORM简介"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-left-s-line"></use></svg><span class="post-nav-text">ORM简介</span></a></div><div class="post-nav-item"><a class="post-nav-next" href="/2021/01/17/Django%E4%BB%8B%E7%BB%8D/" rel="next" title="Django简介"><span class="post-nav-text">Django简介</span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-right-s-line"></use></svg></a></div></div></div></main><footer class="sidebar-translate" id="footer"><div class="copyright"><span>&copy; 2019 – 2021 </span><span class="with-love" id="animate"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-cloud-line"></use></svg></span><span class="author"> yangbo.wang</span></div><div class="powered"><span>Powered by <a href="https://hexo.io" target="_blank" rel="noopener">Hexo</a> v5.3.0</span><span class="footer-separator">|</span><span>Theme - <a rel="noopener" href="https://github.com/YunYouJun/hexo-theme-yun" target="_blank"><span>Yun</span></a> v1.4.0</span></div></footer><a class="hty-icon-button" id="goUp" aria-label="back-to-top" href="#"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-arrow-up-s-line"></use></svg><svg class="progress-circle-container" viewBox="0 0 100 100"><circle class="progress-circle" id="progressCircle" cx="50" cy="50" r="48" fill="none" stroke="#0078E7" stroke-width="2" stroke-linecap="round"></circle></svg></a></div></body></html>